<template>
  <div class="edit-type">
    <van-sticky>
      <van-nav-bar :title="$route.meta.title" left-arrow @click-left="onClickLeft" style="width:100%;" />
    </van-sticky>
    <van-form @submit="onSubmit">
      <van-cell-group class="edit-type-items">
        <van-field label="商品类型" v-model="type_list.type_name" placeholder="选择需要修改的商品类型" @click="showtype = true" input-align="right" is-link readonly />
        <van-field label="商品类型" v-model="new_typename" placeholder="新的商品类型名称" input-align="right" />
        <van-field label="优先级" v-model="sort" type="number" placeholder="商品类型优先级，如：1、2" input-align="right" />
      </van-cell-group>
      <div class="edit-type-set">
        <div class="set-center">
          <van-button round type="info" native-type="submit" color="#1bb89c">保 存</van-button>
        </div>
      </div>
    </van-form>
    <!-- 类型选择 -->
    <van-popup v-model="showtype" round position="bottom" :style="{ height: '55%' }">
      <van-picker :columns="type_list" title="选择类型" @confirm="confirm" @cancel="showtype=false" show-toolbar />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: 'EditType',
  data () {
    return {
      showtype: false,
      disabled: false,
      showSellway: false,
      sort: '',
      type_list: [],
      new_typename: '',
    };
  },
  methods: {
    onClickLeft () {
      this.$router.push({ name: 'goods' })
    },
    // 获取类型列表
    getTypeList () {
      this.$axios("/products/prodtypelist", {
        type: 1,
      })
        .then((res) => {
          if (res.data.code == 1) {
            this.type_list = res.data.data.map(item => {
              return {
                ...item,
                text: item.type_name,
                id: item.id
              }
            })
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 获取已选中的类型
    confirm (val) {
      this.showtype = false;
      this.type_list.type_name = val.text
      this.type_list.type = val.id
    },
    // 编辑类型
    onSubmit () {
      this.$axios("/products/edittype", {
        handle: 'ajax', // 编辑时提交
        type_id: this.type_list.type, //旧的类型id
        type_name: this.new_typename, //新的类别名称
        sort: this.sort //新的排序
      })
        .then((res) => {
          if (res.data.code == 1) {
            Toast.success('已保存')
            setTimeout(() => {
              this.$router.go(0)
            }, 1000);
          } else {
            Toast.fail('保存失败')
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created () {
    this.getTypeList()
  },
}
</script>
<style lang="less" scoped>
.edit-type {
  display: flex;
  flex-direction: column;
  &-items {
    width: 100%;

    /deep/ .van-field__label {
      color: black;
    }
  }
  &-set {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 100px auto;
    .set-center {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 0 auto;
      .set-spacing {
        height: 30px;
      }
      /deep/ .van-button {
        width: 50%;
        height: 80px;
        font-weight: bold;
        font-size: 30px;
      }
    }
  }
}
</style>